<template>
  <div class="notice">
    <search @getValue="getSonValue" @mysearch="mysearch"></search>
    <div class="mainbox">
      <el-breadcrumb separator="/" class="datails_nav">
        <el-breadcrumb-item :to="{ path: '/' }">
          <el-icon><HomeFilled /></el-icon>首页
        </el-breadcrumb-item>
        <el-breadcrumb-item>通知公告</el-breadcrumb-item>
      </el-breadcrumb>

      <div class="content">
        <div class="content_left">
          <div
            class="pointer"
            @click="changecurrent(index)"
            :class="current == index ? 'active' : ''"
            v-for="(i, index) in noticelist"
          >
            {{ i }}
          </div>
        </div>
        <div class="content_right">
          <div
            class="content_right_item pointer"
            @click="todetail(i)"
            v-for="i in rendetrnoticelist"
          >
            <!-- <div class="totle">
              <b>15</b>
              <div class="totledate-bottom">
                <p>{{ i.publishTime }}</p>
              </div>
            </div> -->
            <div class="content">
              <b class="bbold">{{ i.title }}</b>
              <div class="con-div">{{ formatDate(i.publishTime) }}</div>
            </div>
          </div>
          <div v-if="rendetrnoticelist == ''" style="height: 300px">
            <el-empty class="emptybox" description="暂无数据~" />
          </div>
        </div>
      </div>
      <div class="pagniation">
        <el-pagination
          background
          layout="prev, pager, next"
          @change="handleSizeChange"
          :total="1000"
        />
      </div>
    </div>
  </div>
</template>

<script setup lang="ts">
import search from "./acl/search.vue";
import { ArrowRight, HomeFilled } from "@element-plus/icons-vue";
import { ref, getCurrentInstance } from "vue";
import { useRouter } from "vue-router";
import { getnews, getnotice } from "@/api/user/index";

let $router = useRouter();
const noticelist = ["工作动态", "通知公告"];
const current = ref(0);
const keyword = ref("");

// 格式化日期，去掉时分秒
const formatDate = (dateStr: string) => {
  if (!dateStr) return "";
  // 如果包含空格，取空格前的部分（日期部分）
  return dateStr.split(" ")[0];
};
const getSonValue = (e: any) => {
  console.log(e); //子组件传入的值
  keyword.value = e;
};
const rendetrnoticelist: any = ref([]);
const currentPage3 = ref(1);
const changecurrent = (index) => {
  current.value = index;
  if (index == 0) {
    rendetrnoticelist.value = newslist.value;
  } else {
    rendetrnoticelist.value = mynoticelist.value;
  }
};
const { proxy } = getCurrentInstance() as any;
const handleSizeChange = (val: number) => {
  currentPage3.value = val;
  getnewslist();
  getnoticelist();
};

const mysearch = () => {
  //   if(current.value==0){
  //     getnoticelist()
  //   }else{
  //     getnewslist()
  //   }
  getnewslist();

  getnoticelist();
};

const todetail = (item: any) => {
  // 如果是链接类型，直接打开链接
  if (item.type === '链接类型' && item.link) {
    window.open(item.link, '_blank');
    return;
  }
  // 否则跳转到详情页
  // 由于数组顺序已调换，需要反转 index：0->1, 1->0
  const detailIndex = current.value === 0 ? 1 : 0;
  $router.push({
    path: "/noticedetail",
    query: {
      id: item.id,
      index: detailIndex,
    },
  });
};
const mynoticelist = ref([]);
const newslist = ref([]);

function getnewslist() {
  proxy
    .$get("/news/list", {
      current: currentPage3.value,
      limit: 10,
      keyword: keyword.value,
    })
    .then((res: any) => {
      newslist.value = res.data.records;
      if (current.value == 0) {
        rendetrnoticelist.value = res.data.records;
      }
    });
}
getnewslist();

function getnoticelist() {
  proxy
    .$get("/notice/list", {
      current: currentPage3.value,
      limit: 10,
      keyword: keyword.value,
    })
    .then((res: any) => {
      mynoticelist.value = res.data.records;
      if (current.value == 1) {
        rendetrnoticelist.value = res.data.records;
      }
    });
}

getnoticelist();
</script>

<style lang="scss" scoped>
@mixin flex {
  display: flex;
  align-items: center;
}
.notice {
  .mainbox {
    width: 1280px;
    margin: 30px auto 0;
    padding-bottom: 80px;
    .content {
      display: flex;
      flex-direction: column;
      margin-bottom: 30px;
      .content_left {
        height: 50px;
        @include flex();

        font-size: 16px;
        width: 100%;
        margin-top: 20px;
        justify-content: flex-start;
        & > div {
          width: 155px;
          height: 48px;
          text-align: center;
          line-height: 48px;
          color: #333;
          font-size: 18px;
          position: relative;
          background: #fff;
          margin-right: 1px;
          cursor: pointer;
          font-family: PingFang SC;
        }
        .active {
          background-color: #308bec !important;
          color: #fff !important;
          border: 1px solid #308bec !important;
          &:after {
            content: "";
            display: block;
            width: 0;
            height: 0;
            border: 8px solid transparent;
            border-top: 8px solid #308bec;
            position: absolute;
            left: 50%;
            bottom: -15px;
          }
        }
      }

      .content_right {
        position: relative;
        .content_right_item {
          height: 42px;
          background: #fff;
          border: 1px solid #e5e5e5;
          opacity: 1;
          margin-top: 33px;
          box-sizing: border-box;
          overflow: hidden;
          display: flex;
          justify-content: flex-start;
          cursor: pointer;

          .totle {
            width: 110px !important;
            height: 100%;
            text-align: center;
            background: #dbebfc;
            b {
              font-size: 32px;
              font-family: PingFang SC;
              font-weight: 600;
              line-height: 24px;
              color: #0568be;
              margin: 30px 0 24px;
              display: block;
            }

            .totledate-bottom {
              width: 100%;
              height: 20px;
              box-sizing: border-box;
              display: flex;
              align-items: center;
              justify-content: center;
              p {
                font-size: 14px;
                color: #686f88;
              }
            }
          }

          .content {
            margin-left: 25px;
            padding-top: 20px;
            padding-right: 20px;
            padding-bottom: 20px;
            line-height: 20px;
            text-align: left;
            box-sizing: border-box;
            width: 1140px;
            display: flex;
            flex-direction: row;
            justify-content: space-between;
            align-items: center;
            flex-wrap: nowrap;
          }

          .content b {
            text-align: left !important;
            color: #333;
            font-size: 20px;
            flex: 1;
            margin-right: 20px;
            line-height: 20px;
          }
          .bbold {
            font-weight: 700 !important;
          }

          .con-div {
            line-height: 20px;
            font-size: 16px !important;
            color: #999;
            white-space: nowrap;
            flex-shrink: 0;
          }
        }
      }
    }
    .datails_nav {
      line-height: normal;
      :deep(.el-breadcrumb__inner) {
        display: flex;
        align-items: center;
      }
    }
  }
}
</style>
